<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>个人主页</title>
  <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../css/user_home.css" />
</head>

<body>
  <div id="app" v-cloak>
    <div class="wrap flex-wrap flex-vertical">
      <div class="user-center flex-con">
        <div id="user-center-header" :class="['user-center-header', header_fixed ? 'fixed' : '']" :style="{background: 'rgba(255,255,255,'+ opacity +')'}">
          <div @click="goback" class="user-center-header-left">
            <i class="iconfont icon-pre"></i>
          </div>
          <div class="title">{{to_member.name}}</div>
          <div class="user-center-header-right">
            <span>···</span>
          </div>
        </div>
        <div class="carousel-wrap">
          <div class="carousel">
            <img :src="to_member.avatar" alt="">
          </div>
        </div>
        <div class="member-wrap">
          <div class="member-name">
            <div class="name">{{to_member.name}}(ID{{to_member.member_id}})</div>
            <div :class="['status', 'status' + to_member.status]">
              <i></i>{{to_member.status | getStatus}}
            </div>
          </div>
          <div class="member-info">
            <div class="info1">
              <div class="appraisal">
                <i v-for="item in to_member_grade" class="iconfont icon-xingxing"></i>
              </div>
              <div class="occupation">{{to_member.occupation == null ? to_member.signature : to_member.occupation}}</div>
            </div>
            <div class="info2">
              <div class="info-item fans">
                <strong>{{to_member.like_size}}</strong>
                <span>粉丝数</span>
              </div>
              <div class="info-item price">
                <strong>{{to_member.price}}</strong>
                <span>港币/分钟</span>
              </div>
            </div>
          </div>
          <div class="member-signature">
            <strong class="th">Ta说</strong>
            <span class="td">
              <em>{{to_member.signature}}</em>
            </span>
          </div>
          <div class="member-data">
            <h2>个人资料</h2>
            <div class="data">
              <div class="data-item">
                <span class="th">接听率：</span>
                <span class="td">{{to_member.connect}}%</span>
              </div>
              <div class="data-item">
                <span class="th">身高：</span>
                <span class="td">{{to_member.height}}cm</span>
              </div>
              <div class="data-item">
                <span class="th">体重：</span>
                <span class="td">{{to_member.weight}}kg</span>
              </div>
              <div class="data-item">
                <span class="th">城市：</span>
                <span class="td">{{to_member.city}}</span>
              </div>
              <div class="data-item">
                <span class="th">星座：</span>
                <span class="td">{{constellationList[to_member.constellation]}}</span>
              </div>
            </div>
          </div>
          <div class="gift-wrap">
            <h2>礼物柜</h2>
            <div class="gift-list">
              <div v-if="gift_list.length == 0" class="gift-none">还没有人送我礼物~</div>
              <div v-else class="gift-item" v-for="(item, i) in gift_list" :key="i">
                <div class="gift-img">
                  <img :src="item.gift.file" alt="">
                </div>
                <div class="gift-name">{{item.gift.name}}</div>
                <div class="gift-count">x {{item.size}}</div>
              </div>
            </div>
          </div>
          <div class="member-dynamic">
            <h2>Ta的动态</h2>
            <div class="dynamic-list">
              <div v-if="dynamic_list.length == 0" class="dynamic-none">还未发表动态~</div>
              <div v-else class="dynamic-item" v-for="(item, i) in dynamic_list" :key="i" @click="openDynamicDetail(item)">
                <div class="dynamic-content">{{item.description}}</div>
                <div class="dynamic-media">
                  <div class="media-item" v-for="(media, i) in item.files" :key="i">
                    <div v-if="media.type == '1'" :class="['video', item.is_pay == '0' ? 'blur' : '']" :style="{backgroundImage: 'url('+ media.filename + '?vframe/jpg/offset/1' +')'}">
                      <div class="play-icon">
                        <i class="iconfont icon-bofang"></i>
                      </div>
                    </div>
                    <div v-if="media.type == '0'" :class="['img', item.is_pay == '0' ? 'blur' : '']">
                      <img :src="media.filename + '?imageView2/1/w/300/h/300'" alt="">
                    </div>
                    <i v-if="item.is_pay == '0'" class="iconfont icon-status1"></i>
                  </div>
                </div>
                <div class="dynamic-footer">
                  <div class="footer-item time">{{item.created_at | timeFormat}}</div>
                  <div class="footer-item">
                    <i class="iconfont icon-yanzhengma"></i>{{item.comment_size}}
                  </div>
                  <div :class="[item.is_like == 1 ? 'like' : '','footer-item']">
                    <i class="iconfont icon-xin"></i>{{item.like_size}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="from_member_id != to_member_id" class="user-center-footer">
          <div @click="openIM" class="menu-item-s">
            <i class="iconfont icon-yanzhengma"></i>
            <span>私聊</span>
          </div>
          <div @click="openGiftFrame" class="menu-item-s">
            <i class="iconfont icon-liwu"></i>
            <span>送礼物</span>
          </div>
          <div @click="setUserFollow" class="menu-item-s">
            <i :class="['iconfont', 'icon-xin', !!is_follow ? 'follow' : '']"></i>
            <span>{{!!is_follow ? '已关注' : '关注'}}</span>
          </div>
          <div @click="call('videoCall')" class="menu-item-b">
            <i class="iconfont icon-call"></i>
            <span>开始通话</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
  var app, dialogBox;
  apiready = function () {
    $api.fixStatusBar($api.dom('#user-center-header'));
    api.setStatusBarStyle({
      style: 'light',
    });
    dialogBox = api.require('dialogBox');
    app = new Vue({
      el: '#app',
      data: {
        header_fixed: false,
        opacity: 0,
        from_member_id: $api.getStorage('uid'),
        to_member_id: api.pageParam.member_id,
        constellationList: ['未知', '白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '魔蝎座', '水瓶座', '双鱼座'],
        from_member: {},
        to_member: {},
        to_member_grade: 0,
        is_follow: 0,
        gift_list: [],
        dynamic_list: [],
      },
      created: function () {
        var _this = this;
        api.addEventListener({
          name: 'keyback'
        }, function (ret, err) {
          api.sendEvent({
            name: 'videoPlay',
          });
          api.sendEvent({
            name: 'refreshHome'
          });
          api.closeWin();
        });
        api.addEventListener({
          name: 'refreshUserHome'
        }, function (ret, err) {
          _this.getHomeDetail();
        });
        api.addEventListener({
          name: 'giveGift_showVipDialog'
        }, function (ret, err) {
          api.closeFrame({
            name: 'gift_box'
          });
          _this.showVipDialog('开通VIP即可赠送礼物');
        });
        api.addEventListener({
          name: 'giveGift_showRechargeDialog'
        }, function (ret, err) {
          api.closeFrame({
            name: 'gift_box'
          });
          _this.showRechargeDialog('您的余额不足，无法赠送礼物');
        });
      },
      mounted: function () {
        var _this = this;
        _this.getHomeDetail();
        window.addEventListener('scroll', _this.handleScroll);
      },
      methods: {
        handleScroll: function () {
          var top = document.body.scrollTop;
          var carousel = $api.offset($api.dom('.carousel-wrap'));
          this.opacity = top/carousel.h > 1 ? 1 : top/carousel.h;
          if (top > (carousel.h - 40)) {
            this.header_fixed = true;
          } else {
            this.header_fixed = false;
          }
        },

        goback: function () {
          api.closeWin();
        },

        getHomeDetail: function () {
          var _this = this;
          api.showProgress({
            title: '',
            text: '',
          });
          api.ajax({
            url: baseUrl + 'home/detail',
            method: 'get',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                uid: $api.getStorage('uid'),
                id: api.pageParam.member_id
              },
            }
          }, function (ret, err) {
            api.hideProgress();
            if (ret.status == 200) {
              _this.to_member = ret.data.info;
              _this.is_follow = ret.data.is_follow;
              _this.from_member = ret.info;
              _this.gift_list = ret.data.giftlist;
              _this.dynamic_list = ret.data.dynamic;
              _this.to_member_grade = Math.ceil(parseInt(_this.to_member.grade)/20)
            }
          })
        },

        setUserFollow: function () {
          var _this = this;
          api.showProgress({
            title: '',
            text: '',
          });
          api.ajax({
            url: baseUrl + 'user/follow',
            method: 'get',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                uid: $api.getStorage('uid'),
                to_uid: api.pageParam.member_id
              },
            }
          }, function (ret, err) {
            api.hideProgress();
            if (ret) {
              api.toast({
                msg: ret.message[0],
              });
              if (ret.status == 200) {
                _this.is_follow = 1;
              }
              if (ret.status == 201) {
                _this.is_follow = 0;
              }
            }
            if (err) {
              api.toast({
                msg: '网络错误，请稍后再试',
              });
            }
          })
        },

        openGiftFrame: function () {
          var _this = this;
          api.openFrame({
            name: 'gift',
            url: 'gift.html',
            rect: {
              x: 0,
              y: 0,
              w: api.winWidth,
              h: api.winHeight
            },
            pageParam: {
              to_uid: _this.to_member.member_id,
              to_uname: _this.to_member.name,
              to_uavatar: _this.to_member.avatar,
            }
          });
        },

        openDynamicDetail: function (item) {
					var _this = this;
					if (item.is_pay == '1') {
						api.openWin({
							name: 'dynamic_detail',
							url: 'dynamic_detail.html',
							slidBackEnabled: false,
							pageParam: {
								id: item.id
							}
						});
					} else {
						if (parseInt(_this.from_member.gold) >= parseInt(item.gold)) {
							api.confirm({
								title: '提示',
								msg: '查看此动态需要' + item.gold + '港币',
								buttons: ['确定', '取消']
							}, function (ret, err) {
								if (ret.buttonIndex == 1) {
									api.openWin({
										name: 'dynamic_detail',
										url: 'dynamic_detail.html',
										slidBackEnabled: false,
										pageParam: {
											id: item.id
										}
									});
								}
							});
						} else {
							_this.showRechargeDialog('您的港币余额不足');
						}
					}
				},

        showVipDialog: function (title) {
          dialogBox.raffle({
            texts: {
              mainText: title,
              subText: '',
              leftTitle: '开通会员'
            },
            styles: {
              bg: '#272320',
              w: 300,
              corner: 2,
              icon: {
                marginT: 20,
                w: 40,
                h: 40,
                corner: 20,
                iconPath: 'widget://image/icon_big_vip.png'
              },
              main: {
                marginT: 10,
                color: '#fff',
                size: 14,
              },
              sub: {
                marginT: 10
              },
              left: {
                w: 300,
                h: 50,
                marginL: 0,
                marginB: 0,
                corner: 2,
                bg: '#000',
                color: '#fff',
                size: 16
              }
            },
            tapClose: true
          }, function (ret, err) {
            if (ret.eventType == 'left') {
              api.openWin({
                name: 'my_vip',
                url: 'my_vip.html',
                slidBackEnabled: false
              });
              dialogBox.close({
                dialogName: 'raffle'
              });
            }
          });
        },

        showRechargeDialog: function (title) {
          dialogBox.evaluation({
            styles: {
              bg: '#fff',
              corner: 2,
              w: 300,
              title: {
                marginT: 20,
                size: 14,
                h: 50,
                color: '#000',
                bold: true,
                borderColor: '#eee',
                borderWidth: 1
              },
              buttons: [{
                w: 300,
                h: 50,
                color: '#0077ff',
                size: 14,
                borderColor: '#eee',
                borderWidth: 1
              }, {
                w: 300,
                h: 50,
                color: '#0077ff',
                size: 14,
                borderColor: '#eee',
                borderWidth: 1
              }, {
                w: 300,
                h: 50,
                color: '#000',
                size: 14
              }]
            },
            texts: {
              title: title,
              buttons: [{
                text: '去赚钱'
              }, {
                text: '去充值'
              }, {
                text: '取消'
              }]
            },
            tapClose: true
          }, function (ret, err) {
            if (ret) {
              if (ret.index == 0) {
                dialogBox.close({
                  dialogName: 'evaluation'
                });
                api.openWin({
                  name: 'my_share',
                  url: 'my_share.html',
                  slidBackEnabled: false
                });
              }
              if (ret.index == 1) {
                dialogBox.close({
                  dialogName: 'evaluation'
                });
                api.openWin({
                  name: 'recharge',
                  url: 'recharge.html',
                  slidBackEnabled: false
                });
              }
              if (ret.index == 2) {
                dialogBox.close({
                  dialogName: 'evaluation'
                });
              }
            }
          });
        },

        openRecharge: function () {
          api.openWin({
            name: 'recharge',
            url: 'recharge.html',
            slidBackEnabled: false
          });
        },

        // 打开im页面
        openIM: function () {
          var _this = this;
          var tempExtra = {
            fromId: $api.getStorage('uid'),
            fromName: $api.getStorage('uname'),
            fromAvatar: $api.getStorage('uavatar'),
            toId: _this.to_member.member_id,
            toName: _this.to_member.name,
            toAvatar: _this.to_member.avatar,
          }
          api.openWin({
            name: 'im',
            url: 'im.html',
            pageParam: tempExtra
          });
        },

        showActionSheet: function () {
					var _this = this;
					if (_this.to_member.member_id == '2') {
						api.toast({
							msg: '不能给客服人员视频'
						})
						return false;
					}
					api.actionSheet({
						title: '',
						cancelTitle: '取消',
						destructiveTitle: '',
						buttons: ['语音通话', '视频通话']
					}, function (ret, err) {
						if (ret) {
							if (ret.buttonIndex == 1) {
								_this.call('voiceCall');
							}
							if (ret.buttonIndex == 2) {
								_this.call('videoCall');
							}
						}
					});
				},

        // 视频通话
        call: function (type) {
          var _this = this;
          var tempExtra = {
            fromId: $api.getStorage('uid'),
            fromName: $api.getStorage('uname'),
            fromAvatar: $api.getStorage('uavatar'),
            toId: _this.to_member.member_id,
            toName: _this.to_member.name,
            toAvatar: _this.to_member.avatar,
          };
          // 发起视频
          api.ajax({
            url: baseUrl + 'message/videoCall',
            method: 'post',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                uid: $api.getStorage('uid'),
                from_uid: $api.getStorage('uid'),
                to_uid: _this.to_member.member_id,
                type: '0',
              },
            }
          }, function (ret, err) {
            if (ret.status == 200) {
              api.openWin({
                name: 'call1',
                url: 'call1.html',
                slidBackEnabled: false,
                pageParam: {
                  extra: tempExtra,
                  type: type,
                  time: ret.data.time,
                }
              });
            } else if (ret.status == 401) {
              _this.showRechargeDialog(ret.message[0]);
            } else {
              api.toast({
                msg: ret.message[0]
              })
            }
          })
        },
        // 投诉，建议，分享
        // showActionSheet: function (index) {
        //   var _this = this;
        //   _this.imgIndex = index;
        //   api.actionSheet({
        //     title: '',
        //     cancelTitle: '取消',
        //     destructiveTitle: '',
        //     buttons: ['投诉', '建议']
        //   }, function(ret, err) {
        //     if (ret) {
        //       if (ret.buttonIndex == 1) {
        //         // alert("投诉")
        //         // alert($api.getStorage('uid'))
        //         var tempExtra = {
        //           fromId: $api.getStorage('uid'),
        //           fromName: $api.getStorage('uname'),
        //           fromAvatar: $api.getStorage('uavatar'),
        //           toId: 2,
        //           toName:"官方客服" ,
        //           toAvatar:'../image/message.png',
        //         }
        //           api.openWin({
        //                 name: 'im',
        //                 url: 'im.html',
        //                 pageParam: tempExtra
        //               });
        //               }
        //       if (ret.buttonIndex == 2) {
        //         // alert("建议")
        //         var tempExtra = {
        //           fromId: $api.getStorage('uid'),
        //           fromName: $api.getStorage('uname'),
        //           fromAvatar: $api.getStorage('uavatar'),
        //           toId: 2,
        //           toName:"官方客服" ,
        //           toAvatar:'../image/message.png',
        //         }
        //           api.openWin({
        //                 name: 'im',
        //                 url: 'im.html',
        //                 pageParam: tempExtra
        //               });
        //       }
        //     }
        //   });
        // },
      },
      filters: {
        getStatus: function (value) {
          if (value == '0') {
            return '离线';
          }
          if (value == '1') {
            return '在线';
          }
          if (value == '4') {
            return '忙碌';
          }
        },

        timeFormat: function (value) {
					var now = new Date().getTime(),
						oldTime = new Date(value).getTime(),
						difference = now - oldTime,
						result = '',
						minute = 1000 * 60,
						hour = minute * 60,
						day = hour * 24,
						halfamonth = day * 15,
						month = day * 30,
						year = month * 12,
						_year = difference / year,
						_month = difference / month,
						_week = difference / (7 * day),
						_day = difference / day,
						_hour = difference / hour,
						_min = difference / minute;
					if (_year >= 1) {
						result = ~~(_year) + " 年前"
					} else if (_month >= 1) {
						result = ~~(_month) + " 个月前"
					} else if (_week >= 1) {
						result = ~~(_week) + " 周前"
					} else if (_day >= 1) {
						result = ~~(_day) + " 天前"
					} else if (_hour >= 1) {
						result = ~~(_hour) + " 小时前"
					} else if (_min >= 1) {
						result = ~~(_min) + " 分钟前"
					} else result = "刚刚";
					return result;
				},
      }
    })
  }
</script>